<template>
  <!-- 页码 -->
  <div class="block">
    <el-pagination
      layout="prev, pager, next"
      :hide-on-single-page="true"
      :page-size="this.parent.pageSize"
      :total="this.parent.total"
      :current-page="this.parent.pageNum"
      @current-change="Current">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    methods:{
      Current(current){
        this.parent.pageNum = current;
        this.parent.getData();
      }
    },
    props: ["parent"]
  }
</script>

<style>
  .block{
    margin-top: 10px;
  }
  .el-pagination .number {
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    margin: 0px 8px;

  }

  .el-pagination .number.active {
    border-radius: 5px;
    border: 1px solid #5272FF;
  }

  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    border-radius: 5px;
    border: 1px solid #DCDCDC;
    margin: 0px 8px;
  }

  .el-pagination .btn-next {
    padding-left: 5px;
  }

  .el-pagination .btn-prev {
    padding-right: 5px;
  }

  .el-pagination .btn-next:hover,
  .el-pagination .btn-prev:hover,
  .el-pagination .number:hover {
    border: 1px solid #5272FF;
  }

  .el-pagination .btn-next:disabled,
  .el-pagination .btn-prev:disabled {
    border: 1px solid #cdd2da;
    color: #cdd2da;
  }

  .el-pagination .btn-next:disabled:hover,
  .el-pagination .btn-prev:disabled:hover {
    border: 1px solid #cdd2da;
    color: #cdd2da;
  }

  .el-pagination {
    text-align: center;
  }
</style>
